<template>
    <div class="achieveBasicInfo container">
        <div id="components-form-demo-advanced-search">
            <div class="tabCommonTitle">
                <span>成果基本情况</span>
                <b>红色星号为必填项</b>
            </div>
            <a-form-model
                ref="ruleForm"
                :model="form"
                :rules="rules"
                :label-col="labelCol"
                :wrapper-col="wrapperCol"
            >
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item ref="achievementNameChinese" label="成果名称中文" prop="achievementNameChinese">
                            <!-- <a-input :disabled="tjzt" v-model="form.achievementNameChinese"/> -->
                            <a-input :disabled="isEditAchievementNameChinese" v-model="form.achievementNameChinese"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item ref="achievementNameEnglish" label="成果名称英文">
                            <a-input v-model="form.achievementNameEnglish"/>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item ref="keyWord" label="关键词" prop="keyWord">
                            <a-input v-model="form.keyWord"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item ref="startTime" label="起始时间" prop="startTime">
                            <a-date-picker
                                v-if="type==61"
                                :default-picker-value="moment('2024-06-25', dateFormat)"
                                :disabled-date="disabledZlStartDate"
                                @change="startChange"
                                @openChange="handleStartOpenChange"
                                format="YYYY-MM-DD"
                                v-model="form.startTime"
                                type="date"
                                placeholder=""
                                style="width: 100%;"
                            />
                            <a-date-picker
                                v-else
                                :default-picker-value="moment('2023-06-25', dateFormat)"
                                :disabled-date="disabledStartDate"
                                @change="startChange"
                                @openChange="handleStartOpenChange"
                                format="YYYY-MM-DD"
                                v-model="form.startTime"
                                type="date"
                                placeholder=""
                                style="width: 100%;"
                            />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item ref="finishTime" label="完成时间" prop="finishTime">
                            <a-date-picker
                                v-model="form.finishTime"
                                type="date"
                                placeholder=""
                                style="width: 100%;"
                                @change="finishChange"
                                @openChange="handleEndOpenChange"
                                :disabled-date="disabledEndDate"
                                format="YYYY-MM-DD"
                            />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item ref="achievementsSource" label="成果来源" prop="achievementsSource">
                            <a-select v-model="form.achievementsSource" placeholder="">
                                <a-select-option :value="item.cglyBh" v-for="(item, index) in cglylist" :key="index">
                                    {{item.cglyMc}}
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item ref="specificNameNum" label="具体计划名称和编号">
                            <a-input v-model="form.specificNameNum"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item ref="declarationCategory" label="成果申报类别" prop="declarationCategory">
                            <a-input :disabled="true" v-model="form.declarationCategory"/>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row v-if="type==31">
                    <a-col :span="12">
                        <a-form-model-item ref="declarationCategoryValue" label="成果申报类别小类">
                            <a-cascader
                                disabled
                                v-model="form.declarationCategoryValue"
                                :options="options"
                                placeholder=""
                            />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <!--  -->
                <a-row v-else>
                    <a-col :span="12">
                        <a-form-model-item prop="declarationCategoryValue" ref="declarationCategoryValue" label="成果申报类别小类">
                            <a-cascader
                                v-model="form.declarationCategoryValue"
                                :options="options"
                                placeholder=""
                            />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row class="subTn">
                    <a-col :span="24">
                        <a-form-model-item>
                            <a-button class="save_info_btn" :disabled="is_modify=='Y' ? false : true" :class="is_modify=='Y'?'':'disabled'" type="primary" @click="onSubmit">保存</a-button>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </div>
    </div>
</template>
<script>
import {
    // 已报成果信息
    cxjsbGetCxjByid,
    // 成果来源
    cxjsbCglylist,
    // 申报类别
    cxjsbValidlist,
    // 成果申报小类
    cxjsbLoadTreeRoot,
    // 修改成果基本信息
    cxjsbAdd
} from "@/api/shenbao";
import moment from 'moment';
import { mapActions } from 'vuex'
export default {
    name: 'AchieveBasicInfo',
    props: ['is_modify'],
    data() {
        this.dateFormat = 'YYYY-MM-DD';
        return {
            tjzt: this.$route.query.tjzt == "同意推荐" ? true : false,
            xlFlag: true,
            labelCol: { span: 7 },
            wrapperCol: { span: 14 },
            other: '',
            detailInfo: {},
            form: {
                // 成果名称中文
                achievementNameChinese: '',
                // 成果名称英文
                achievementNameEnglish: '',
                // 关键词
                keyWord: '',
                // 起始时间
                startTime: null,
                // 完成时间
                finishTime: null,
                // 成果来源
                achievementsSource: '',
                // 具体名称和编号
                specificNameNum: '',
                // 成果申报类别
                declarationCategory: '',
                // 成果申报小类
                declarationCategoryValue: []
            },
            rules: {
                achievementNameChinese: [{ required: true, message: '请填写成果名称中文', trigger: 'blur' }],
                keyWord: [{ required: true, message: '请填写关键词', trigger: 'blur' }],
                startTime: [{ required: true, message: '请填写起始时间', trigger: 'change' }],
                finishTime: [{ required: true, message: '请填写完成时间', trigger: 'change' }],
                achievementsSource: [{ required: true, message: '请选择成果来源', trigger: 'change' }],
                declarationCategory:[{ required: true, message: '请选择成果申报类别', trigger: 'change' }],
                declarationCategoryValue: [{ type: 'array', required: true, message: '请选择成果申报小类', trigger: 'change' }]
            },
            cglylist: [],
            validlist: [],
            options: [],
            declarationCategory: [],
            type: this.$route.query.type
        }
    },
    computed: {
        isEditAchievementNameChinese() {
            // const tjzt = this.$route.query.tjzt;
            const { sbztbh, xsztbh, fl_id, tjzt } = this.detailInfo;
            // return (tjzt !== '同意推荐' || sbztbh == 100 ||  (xsztbh == 302 && fl_id == 21));
            return (tjzt == '同意推荐' && fl_id != 21);
        },
    },
    mounted(){
        this.getCxjsbGetCxjByid();
        this.getCxjsbCglylist();
        this.getCxjsbValidlist();
    },
    methods: {
        moment,
        ...mapActions('fillingSteps', ['getStatus']),
        disabledStartDate(startValue) {
            // console.log('开始时间范围',startValue)
            // const endValue = this.form.endTime;
            // if (!startValue || !endValue) {
            //     return false;
            // }
            // return startValue.valueOf() > endValue.valueOf();

            const endValue = moment('2023-06-25');
            if (!startValue || !endValue) {
                return false;
            }
            return startValue.valueOf() > endValue.valueOf();
        },
      disabledZlStartDate(startValue) {
        const endValue = moment('2024-06-25');
        if (!startValue || !endValue) {
          return false;
        }
        return startValue.valueOf() > endValue.valueOf();
      },
        disabledEndDate(endValue) {
            const startValue = this.form.startTime;
            if (!endValue || !startValue) {
                return false;
            }
            return startValue.valueOf() >= endValue.valueOf();
        },
        handleStartOpenChange(open) {
            // if (!open) {
            //     this.endOpen = true;
            // }
        },
        handleEndOpenChange(open) {
            // this.endOpen = open;
        },
        finishChange(date, dateString){
            this.form.finishTime = dateString;
        },
        startChange(date, dateString){
            this.form.startTime = dateString;
        },
        getCxjsbGetCxjByid(){
            cxjsbGetCxjByid({
                cxj_cxj_id: this.$route.query.cxj_cxj_id
            }).then(res=>{
                let data = res.data;
                if (data.success) {
                    this.detailInfo = data.result;
                    this.getCxjsbLoadTreeRoot(data.result.fl_id);
                    this.form.achievementNameChinese = data.result.cxj_mc_zw;
                    this.form.achievementNameEnglish = data.result.cxj_mc_yw;
                    this.form.keyWord = data.result.cxj_gjc;
                    this.form.startTime = data.result.cxj_qssj.slice(0,10);
                    this.form.finishTime = data.result.cxj_wcsj.slice(0,10);
                    this.form.specificNameNum = data.result.cxj_jhjjbh?data.result.cxj_jhjjbh:'';
                    this.form.achievementsSource = data.result.cxj_xmly;
                    this.form.declarationCategory = data.result.fl_mc;
                    this.form.declarationCategoryValue = data.result.xl_id.split(';');
                }
            })
        },
        // 获取成果分类列表
        getCxjsbValidlist(){
            cxjsbValidlist().then(res=>{
                let data = res.data;
                if (data.success) {
                    this.validlist = data.result;
                }
            })
        },
        // 获取成果来源
        getCxjsbCglylist(){
            cxjsbCglylist().then(res=>{
                let data = res.data;
                if (data.success) {
                    this.cglylist = data.result;
                }
            })
        },
        handelDeclarationCategory(value){
            // this.getCxjsbLoadTreeRoot(value)
        },
        convertAchievementsTree(tree) {
            var self = this;
            const result = [];
            // 遍历 tree
            tree.forEach(item => {
                // 读取 map 的键值映射
                const value = item.code;
                const label = item.title;
                let children = item.children;
                let children_arr = [];
                if (item.children && item.children.length) {
                    children_arr = self.convertAchievementsTree(item.children);
                }
                // 如果有子节点，递归
                if (children && children.length > 0) {
                    children = self.convertAchievementsTree(children);
                    result.push({
                        value,
                        label,
                        children
                    });
                } else {
                    var data = {
                        value,
                        label
                    };
                    result.push(data);
                }
            });
            return result;
        },
        // 获取成果小类
        getCxjsbLoadTreeRoot(value){
            cxjsbLoadTreeRoot({
                async: false,
                pcode: value
            }).then(res=>{
                let data = res.data;
                if (data.success) {
                    this.xlFlag = true;
                    this.loadTreeRoot = data.result;
                    this.options = this.convertAchievementsTree(data.result);
                } else {
                    this.options = [];
                    this.xlFlag = false;
                }
            })
        },
        onSubmit() {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    let formData = new FormData();
                    // 成果名称
                    formData.append('cxj_mc_zw', this.form.achievementNameChinese)
                    // 成果名称英文
                    formData.append('cxj_mc_yw', this.form.achievementNameEnglish)
                    // 关键词
                    formData.append('cxj_gjc', this.form.keyWord)
                    // 起始时间
                    formData.append('cxj_qssj', this.form.startTime)
                    // 完成时间
                    formData.append('cxj_wcsj', this.form.finishTime)
                    // 成果来源
                    formData.append('cxj_xmly', this.form.achievementsSource)
                    // 具体计划名称和编号
                    formData.append('cxj_jhjjbh', this.form.specificNameNum)
                    // 成果申报类别
                    // formData.append('fl_bh', this.form.declarationCategory)
                    formData.append('fl_bh', this.$route.query.type)
                    // if () {}
                    // 申报类别小类
                    formData.append('xl_bh', this.form.declarationCategoryValue.join(';'));
                    // 成果id
                    formData.append('cxj_cxj_id', this.detailInfo.id);
                    cxjsbAdd(formData).then(res=>{
                        let data = res.data;
                        if (data.success) {
                            this.$message.success('修改成功');
                            this.getStatus(this.$route.query.cxj_cxj_id)
                            this.getCxjsbGetCxjByid();
                        } else {
                            this.$message.error(data.message);
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        resetForm() {
            this.$refs.ruleForm.resetFields();
        }
    }
}
</script>
<style lang='less'>
#components-form-demo-advanced-search .ant-form {
    max-width: none;
    margin-top: 24px;
}

.ant-form {
    .ant-form-item {
        .ant-input, .ant-select-selection--single {
            height: 40px;
            border: 1px solid #ECEBEB;
        }
    }

}

</style>

<style lang="less" scoped>
.achieveBasicInfo {
    .subTn {
        text-align: center;
        margin-top: 40px;
    }
}
.save_info_btn {
    width: 250px;
    height: 60px;
    line-height: 60px;
    background: linear-gradient(90deg, #267FEA 0%, #519FF8 100%);
    border-radius: 4px;
    font-size: 22px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
}
</style>
